<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>视频播放</title>
    <script language="javascript" type="text/javascript" src="__STATIC__/layui/jquery1.4.min.js"></script>
    <script language="javascript" type="text/javascript" src="__STATIC__/layui/jquery.jslider.js"></script>
    <link rel="stylesheet" href="__STATIC__/css/video.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/css.css">
    <link rel="stylesheet" href="__STATIC__/layui/css/layui.css">
    <link rel="stylesheet" href="__STATIC__/css/main.css">
    <script language="javascript" type="text/javascript" src="__STATIC__/layui/jquery1.4.min.js"></script>
    <script language="javascript" type="text/javascript" src="__STATIC__/layui/jquery.jslider.js"></script>
    <!--<link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.css">-->
    <style>
        .commentbox{
            width: 100%;
        }
        .mytextarea {
            width: 100%;
            overflow: auto;
            word-break: break-all;
            height: 100px;
            color: #000;
            font-size: 1em;
            resize: none;
        }
        .comment-list{
            width: 800px;
            height:80px;
            margin: 10px auto 10px 0px;
            clear: both;
            padding-top: 10px;
        }
        .comment-list .comment-info{
            position: relative;
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
        }
        .comment-list .comment-info header{
            width: 10%;
            position: absolute;
            background-color: white;
        }
        .comment-list .comment-info header img{
            width: 80%;
            border-radius: 80%;
            padding: 5px;
        }
        .comment-list .comment-info .comment-right{
            padding:5px 0px 5px 11%;
        }
        .comment-list .comment-info .comment-right h3{
            margin: 5px 0px;
        }
        .comment-list .comment-info .comment-right .comment-content-header{
            height: 25px;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span{
            padding-right: 2em;
            color: #81bdeb;
        }
        .comment-list .comment-info .comment-right .comment-content-header span,.comment-list .comment-info .comment-right .comment-content-footer span.reply-btn,.send,.reply-list-btn{
            cursor: pointer;
        }
        .comment-list .comment-info .comment-right .reply-list {
            border-left: 3px solid #ccc;
            padding-left: 7px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply{
            border-bottom: 1px dashed #ccc;
        }
        .comment-list .comment-info .comment-right .reply-list .reply div span{
            padding-left: 10px;
        }
        .comment-list .comment-info .comment-right .reply-list .reply p span{
            padding-right: 2em;
            color: #81bdeb;
        }
    </style>
</head>
<body>

<div class="wrap" >
    <div class="top" style=" background:#fff url(__STATIC__/upfiles/top.png) no-repeat">
        <p><a href="#">设为首页</a> | <a href="#">加为收藏</a>
    </div>
    <!-- top end -->
    <div class="menu" style="background: green">
        <div class="nav">
            <ul>
                <li class="li_hover"><a href="{:url('home/index')}">首页</a></li>
                <li><a href="{:url('home/gsjj')}">公司简介</a></li>
                <li><a href="{:url('home/kczs')}">课程展示</a></li>
                <li><a href="{:url('home/wybm')}">我要报名</a></li>
                <li><a href="{:url('home/rczp')}">人才招聘</a></li>
                <li><a href="{:url('home/zxly')}">在线留言</a></li>
                <li><a href="{:url('home/login')}">个人中心</a></li>
            </ul>
            <div class="clear"></div>
        </div>
    </div>



</div>
<div class="main" >

    <div class="layui-row content layui-col-space10">
        <div class="layui-col-md9">
            <div id="video">
                <video src="__STATIC__/video/{$ksb.href}"controls="controls" style="width: 100%;height: 100%;">
                </video>
            </div>
            <div class="video-info" style="height: 60px;background-color: #F2F2F1;">
                <div class="ops">
                    <span title="点赞数12445" class="like">
                        <i class="fa fa-thumbs-up"></i>1.2万
                    </span>
                    <span title="播放数" class="coin">
                        <canvas width="34" height="34" class="ring-progress"
                                style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-play-circle"></i>1.3万
                    </span>
                    <span title="收藏人数" class="collect">
                        <canvas width="34" height="34" class="ring-progress"
                                style="width:34px;height:34px;left:-3px;top:-3px;"></canvas>
                        <i class="fa fa-star"></i>1.2万
                    </span>
                </div>
            </div>
        </div>
        <div class="layui-col-md3 catalogue" >
            <div class="layui-card">
                <div class="layui-card-header">
                    章节目录
                </div>
                <div class="layui-card-body">
                    {foreach name="kss" key="k" item="v"}
                    {if condition="$kc.kcid eq $v.ofkc"}
                    <ul>
                        <li>
                            <a href="{:url('home/video',['no'=>$v.no,'kcid'=>$kc.kcid])}" >{$v.ksname}</a>
                        </li>
                    </ul>
                    {/if}
                    {/foreach}
                </div>
                <div class="layui-card-body">

                </div>
            </div>
        </div>
    </div>
    <div class="layui-clear"></div>
    <hr class="layui-bg-cyan">
    <div class="layui-row comment">
        <!--这里是评论区-->
        评价： <div id="test4"></div>
        <div class="commentbox">
            <textarea cols="20" rows="10" placeholder="来说几句吧......" class="mytextarea" id="content"></textarea>
            <div class="layui-btn layui-btn-normal pull-right" id="comment">评论</div>
        </div>
        <div class="comment-list">

        </div>
    </div>

</div>
</div>
<script src="__STATIC__/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="__STATIC__/tools/ckplayer/ckplayer/ckplayer.js"></script>
<script src="__STATIC__/layui/layui.all.js" type="text/javascript"></script>
<script type="text/javascript" src="__STATIC__/v-js/jquery.min.js"></script>
<script type="text/javascript" src="__STATIC__/v-js/jquery.comment.js" ></script>
<script type="text/javascript" src="__STATIC__/v-js/bootstrap.min.js"></script>
<script type="text/javascript">
    //初始化数据
    var arr = [
        {id:1,img:"__STATIC__/images/defaultimg.jpg",replyName:"帅大叔",beReplyName:"匿名", content:"很好",
            time:"2019-12-28 15:53:39",replyBody:[]},
        {id:2,img:"__STATIC__/images/defaultimg.jpg",replyName:"匿名",beReplyName:"",content:"8错8错",
            time:"2019-12-28 15:53:39",replyBody:[{id:3,img:"",replyName:"帅大叔",beReplyName:"匿名用户",content:"郝建别装了，我知道是你",time:"2019-12-28 15:53:39",}]},
        {id:3,img:"__STATIC__/images/defaultimg.jpg",replyName:"帅大叔",beReplyName:"匿名",content:"非常不错，受益匪浅",time:"2019-12-28 15:53:39",replyBody:[]}
    ];
    $(function(){
        $(".comment-list").addCommentList({data:arr,add:""});
        $("#comment").click(function(){
            var obj = new Object();
            obj.img="__STATIC__/images/defaultimg.jpg";
            obj.replyName="匿名";
            obj.content=$("#content").val();
            obj.replyBody="";
            $(".comment-list").addCommentList({data:[],add:obj});
        });
    })
    layui.use(['layer', 'element','rate'], function () {
        let $ = layui.jquery
            , layer = layui.layer
            , element = layui.element
        ;
        var rate = layui.rate;
        rate.render({
            elem: '#test4'
            ,value: 0
            ,half: true
            ,text: true
        })
        element.init();
    })

</script>
</body>
</html>
